<template>
  <div class="user-all-panel">
    <div class="xj-component-container">
      <head-template></head-template>
      <div class="xj-component-content">
        <left-bar
           class="left-list"
          :reduce-list="reduceList"
          :component-list="componentList"
          @toTop="momentToTop"
        ></left-bar>
        <xj-select
          style="
            position: absolute;
            right: 20px;
            width: 100px;
            line-height: 100%;
            top: 20px;
            z-index: 999;
          "
          v-model="value"
          :options="arrayList"
          width="50px"
        ></xj-select>
        <div
        class="content-box-container">
          <div class="content-box" @scroll="scroll">
            <router-view style="position: relative; top: 50px" v-if="isShowView"> </router-view>
            <div v-if="isshowIcon" class="top-icon" @click="totop">
              <div class="top-icon-arrow"></div>
            </div>
            <div class="footer-nav">
              <a
                v-show="routeFullPath != '/components/install'"
                name="bottomLeft"
                @click="beforeRoute"
                >&lt; {{ $t("上一级") }}</a
              >
              <a
                v-show="routeFullPath != '/components/messagebox'"
                style="position: absolute; right: 20px"
                name="bottomRight"
                @click="afterRoute"
                >{{ $t("下一级") }} ></a
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import headTemplate from "./head.vue";
import leftBar from "./leftBar.vue";
import bus from "@/utils/bus";
import { ref, toRaw, watch, getCurrentInstance, nextTick } from "vue";
import { useRouter, useRoute } from "vue-router";
import { useI18n } from "vue-i18n";
const { locale, t } = useI18n();
const { proxy } = getCurrentInstance();
let value = ref(locale.value=="en"?"English":"中文");
let componentList = computedComponentList();
let reduceList = computedReduceList()
let isShowView = ref(true)
watch(value, (newVal) => {
  locale.value = newVal == "English" ? "en" : "zh";
  componentList = computedComponentList();
  reduceList = computedReduceList();
  bus.emit("forceUpdate", newVal == "English" ? "en" : "zh");
  isShowView.value = false
  nextTick(() => {
    isShowView.value = true
  })
});
let arrayList = ref([
  {
    value: "中文",
  },
  {
    value: "English",
  },
]);
const router = useRouter();
const route = useRoute();
function computedReduceList() {
  return ref([
  { name: proxy.$t("安装"), path: "/#/components/install" },
  { name: proxy.$t("快速使用"), path: "/#/components/quickUse" },
]);
}
function computedComponentList() {
  return  ref({
  Basice: [
    { name: proxy.$t("按钮"), path: "/#/components/button" },
    { name: proxy.$t("链接"), path: "/#/components/link" },
  ],
  Form: [
    { name: proxy.$t("输入框"), path: "/#/components/Input" },
    { name: proxy.$t("单选框"), path: "/#/components/Radio" },
    { name: proxy.$t("多选框"), path: "/#/components/Switch" },
    { name: proxy.$t("选择器"), path: "/#/components/Select" },
    { name: proxy.$t("评分"), path: "/#/components/Rate" },
    { name: proxy.$t("颜色选择器"), path: "/#/components/ColorPicker" },
    { name: proxy.$t("计数器"), path: "/#/components/InputNumber" },
  ],
  Data: [
    { name: proxy.$t("头像"), path: "/#/components/Head" },
    { name: proxy.$t("标记"), path: "/#/components/Badage" },
    { name: proxy.$t("标签"), path: "/#/components/Tag" },
  ],
  Notic: [
    { name: proxy.$t("加载"), path: "/#/components/Loading" },
    { name: proxy.$t("信息"), path: "/#/components/Message" },
    { name: proxy.$t("弹框"), path: "/#/components/Messagebox" },
  ],
  Others: [
    { name: proxy.$t("走马灯"), path: "/#/components/Carousel" },
    { name: proxy.$t("抽屉"), path: "/#/components/Drawer" },
  ],
});
}
let isshowIcon = ref(false);
let routeFullPath = ref(route.fullPath);
let dom: any = null; // 定义全局的变量，来记录滚动盒子的dom元素
let num = 0; // 滚动盒子的高度
const scroll = (e: any) => {
  num = e.target.scrollTop; // 滚动条距离顶部的距离
  dom = e.target; // 滚动盒子
  isshowIcon.value = num > 40 ? true : false;
};
function momentToTop() {
  setTimeout(() => {
    dom.scrollTop = 0;
  }, 0);
}
function totop() {
  let time = setInterval(() => {
    // 如果 ，滚动的高度是小于定于0 ，就清除定时器
    if (num <= 0) {
      clearInterval(time); // 清空
    } else {
      // 否则，就让滚动盒子的高度--
      num = num - 20;
      // num--
      dom.scrollTop = num; // 让滚动盒子的高度= 0
    }
  }, 10);
}
watch(
  () => route.fullPath,
  (newValue, oldValue) => {
    routeFullPath.value = newValue;
  }
);

function beforeRoute() {
  dom.scrollTop = 0;
  let middlePath = "";
  let newString = "/#" + route.fullPath;
  let newArray = [
    ...toRaw(reduceList.value),
    ...toRaw(componentList.value.Basice),
    ...toRaw(componentList.value.Form),
    ...toRaw(componentList.value.Data),
    ...toRaw(componentList.value.Notic),
    ...toRaw(componentList.value.Others),
  ];
  for (let i = 0; i < newArray.length; i++) {
    if (i - 1 >= 0) {
      middlePath = newArray[i - 1].path;
    }
    if (newString == newArray[i].path) {
      router.push(middlePath.split("#")[1]);
    }
  }
}
function afterRoute() {
  dom.scrollTop = 0;
  let newString = "/#" + route.fullPath;
  let newArray = [
    ...toRaw(reduceList.value),
    ...toRaw(componentList.value.Basice),
    ...toRaw(componentList.value.Form),
    ...toRaw(componentList.value.Data),
    ...toRaw(componentList.value.Notic),
    ...toRaw(componentList.value.Others),
  ];
  for (let i = 0; i < newArray.length; i++) {
    if (newString == newArray[i].path) {
      router.push(newArray[i + 1].path.split("#")[1]);
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep .xj-select__input {
  background-color: transparent !important;
  color: #606266;
}
::v-deep .select-opsition-schroll {
  min-width: 100px !important;
}
::v-deep .select-position-box {
  margin-bottom: 0px !important;
}
.user-all-panel {
  width: 100vw;
  height: 100vh;
}
.xj-component-container {
  width: 70vw;
  position: relative;
  left: 15vw;
  height: calc(100vh);
  overflow: hidden;

  .xj-component-content {
    width: 100%;
    height: calc(100% - 81px);
    display: flex;
  }
}
.content-box-container {
  overflow: hidden;
  width: calc(100% - 240px);
  height: fit-content;
}
.content-box {
  overflow: scroll;
  margin-right: -17px;
  margin-bottom: -17px;
  max-height: calc(100vh - 81px);
  min-height: 656px;
  position: relative;
  .top-icon {
    width: 40px;
    height: 40px;
    position: fixed;
    right: 52px;
    bottom: 77px;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    z-index: 5;
    &:hover {
      background-color: #f2f6fc;
    }
    .top-icon-arrow {
      border-top: 8px solid transparent;
      border-bottom: 8px solid #409eff;
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      position: relative;
      bottom: 15px;
    }
  }
  .footer-nav {
    margin-bottom: 60px;
    margin-top: 40px;
    color: #999;
    transition: 1s ease all;
    position: relative;
    :hover {
      color: $primary;
    }
    a {
      cursor: pointer;
    }
  }
}
@media all and (max-width: 1200px) {
  .xj-component-container {
  width: 90vw;
  position: relative;
  left: 5vw;
  height: calc(100vh);
  overflow: hidden;
}
.left-list {
  display: none;
}
.content-box-container {
  overflow: hidden;
  width: 100%;
  height: fit-content;
}
}
</style>
